<template>
  <div class="box">
    <div class="box-title">监管绩效</div>
    <div class="grid">
      <div class="grid-item">
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/g2.svg" alt="" />
        </div>
        <div
          class="grid-item-r"
          @click="
            openAlreadyTested(
              { title: '已参检', query: { examineYear } },
              NJJLLBZTHttp
            )
          "
        >
          <div class="grid-item-r-title">年检率</div>
          <div class="grid-item-r-tx">
            {{
              countHttpData?.annualRate
                ? Number(countHttpData?.annualRate) * 100
                : 0
            }}%
          </div>
        </div>
      </div>
      <div class="grid-item">
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/g3.svg" alt="" />
        </div>
        <div
          class="grid-item-r"
          @click="
            openAlreadyTested(
              { title: '年检合格率', query: { examineYear, approveStatus: 1 } },
              NJJLLBZTHttp
            )
          "
        >
          <div class="grid-item-r-title">年检合格率</div>
          <div class="grid-item-r-tx">
            {{
              countHttpData?.passRate
                ? Number(countHttpData?.passRate) * 100
                : 0
            }}%
          </div>
        </div>
      </div>
      <div class="grid-item">
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/g4.svg" alt="" />
        </div>
        <div
          class="grid-item-r"
          @click="
            openAlreadyTested(
              { title: '年检平均办结时间', query: { examineYear } },
              NJJLLBZTHttp
            )
          "
        >
          <div class="grid-item-r-title">年检平均办结时间</div>
          <div class="grid-item-r-tx">
            {{
              countHttpData?.avgTimely
                ? countHttpData.avgTimely.split('天')[0] + '天'
                : ''
            }}
          </div>
        </div>
      </div>
      <div class="grid-item">
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/g5.svg" alt="" />
        </div>
        <div
          class="grid-item-r"
          @click="
            openAlreadyTested(
              { title: '党建工作覆盖率', query: { examineYear } },
              queryDJFGLReq
            )
          "
        >
          <div class="grid-item-r-title">党建工作覆盖率</div>
          <div class="grid-item-r-tx">
            {{
              countHttpData?.coverageRate
                ? (Number(countHttpData?.coverageRate) * 100).toFixed(0)
                : 0
            }}%
          </div>
        </div>
      </div>
      <div class="grid-item">
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/g6.svg" alt="" />
        </div>
        <div class="grid-item-r" @click="open">
          <div class="grid-item-r-title">预警信息处置率</div>
          <div class="grid-item-r-tx">{{ dpcontV2Data }}%</div>
        </div>
      </div>
      <div class="grid-item">
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/g7.svg" alt="" />
        </div>
        <div
          class="grid-item-r"
          @click="
            openPopupComplianceRate({
              title: '综合评价达标率',
              query: { gtScore: 99 }
            })
          "
        >
          <div class="grid-item-r-title">综合评价达标率</div>
          <div class="grid-item-r-tx">
            {{
              countHttpData?.standardRate
                ? (Number(countHttpData?.standardRate) * 100).toFixed(0)
                : 0
            }}%
          </div>
        </div>
      </div>
    </div>
  </div>
  <PopupVue ref="PopupVueRef" />
  <PopupAlreadyTested ref="PopupAlreadyTestedRef" />
  <PopupComplianceRate ref="PopupComplianceRateRef" />
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
  countHttp,
  dpcontV2,
  NJJLLBZT,
  queryDJFGL
} from '@/api/spotCheck/spotCheck'
import PopupVue from './popup.vue'
import PopupAlreadyTested from '@/views/largeScreen/page/node2/popup-alreadyTested.vue'
import PopupComplianceRate from './popup-complianceRate.vue'

const countHttpData = ref<Record<string, any>>({})
const dpcontV2Data = ref(0)

onMounted(() => {
  countHttp().then((res) => {
    countHttpData.value = res.data
  })
  dpcontV2().then((res) => {
    dpcontV2Data.value = res.data ?? 0
  })
})

const PopupVueRef = ref<InstanceType<typeof PopupVue> | null>(null)

const open = () => {
  console.log('点击了')
  PopupVueRef.value?.show({ title: '预警信息处置率' })
}

const year = new Date().getFullYear()

const examineYear = ref(year - 1)

const PopupAlreadyTestedRef = ref<InstanceType<
  typeof PopupAlreadyTested
> | null>(null)

const openAlreadyTested = (query, http) => {
  PopupAlreadyTestedRef.value?.show(query, http)
}

const NJJLLBZTHttp = async (params) => {
  const res = await NJJLLBZT(params)
  return {
    data: {
      list: res.rows
    },
    total: res.total
  }
}

const queryDJFGLReq = async (params) => {
  const res = await queryDJFGL(params)
  return {
    data: {
      list: res.rows
    },
    total: res.total
  }
}

const PopupComplianceRateRef = ref<InstanceType<
  typeof PopupComplianceRate
> | null>(null)

const openPopupComplianceRate = (query) => {
  PopupComplianceRateRef.value?.show(query)
}
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 2.7rem;
  margin-bottom: 0.1rem;
  .box-title {
    font-size: 0.3rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
    margin-bottom: 0.1rem;
    height: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'MyCustomFont', sans-serif;
  }
}
.grid {
  width: 100%;
  height: calc(100% - 0.5rem);
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 0.1rem 0;
  .grid-item {
    width: 33%;
    display: flex;
    margin-right: 0.2rem;
    .grid-item-img {
      width: 0.6rem;
      height: 0.55rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('@/assets/imgs/largeScreen/icon/g1.png') no-repeat;
      background-size: 100% 100%;
      transform: translateY(0.1rem);
      img {
        width: 0.3rem;
        height: 0.3rem;
        transform: translateY(-0.2rem);
      }
    }
    .grid-item-r {
      flex: 1;
      margin-left: 0.1rem;
      .grid-item-r-title {
        color: #ffffff;
        font-size: 0.15rem;
        font-family: Arial;
        font-weight: 400;
        margin-bottom: 0.05rem;
      }
      .grid-item-r-tx {
        color: #26d1e8;
        font-size: 0.25rem;
        font-family: Arial;
        font-weight: 300;
      }
    }
  }
  .grid-item:nth-child(3n) {
    flex: 1;
    margin-right: 0;
  }
}
</style>
